<template>
	<view style="height: 100%" class="bg">
		<!-- <custom-nav title="累计消费详情" customTitleStyle="color:#18181A;">
            <view slot="nav-bg" class="nav__bg" :style="'height: ' + navHeight + 'px;'">
                <image class="img" mode="widthFix" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/home_bg.png"></image>
            </view>
        </custom-nav> -->
		<!-- <image class="nav__bg" style="height: 335rpx;" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/home_bg.png"></image> -->

		<view v-if="activityDetail.userStatus == 1">
			<view v-if="activityDetail.status == 2" class="pay-award">
				<view class="demarcation">
					<image class="img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/hd_tit.png">
					</image>
				</view>
				<view class="hd_box">
					<!-- 活动 -->
					<view class="activity-container">
						<view class="title">{{ activityDetail.name }}</view>
						<view class="line-container">
							<view class="left-circle"></view>
							<view class="dotted-line"></view>
							<view class="right-circle"></view>
						</view>
						<view class="head-list">
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<image class="item-icon"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/icon_date.png">
									</image>
									<view class="item-title">活动期限</view>
								</view>
								<view class="head-list__right">
									<text>{{ activityDetail.startTime }}</text>
									<text
										v-if="activityDetail.alwaysValidStatus == 1">~{{ activityDetail.endTime }}</text>
									<text v-if="activityDetail.alwaysValidStatus == 2">~长期有效</text>
								</view>
							</view>
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<image class="item-icon"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/icon_time.png">
									</image>
									<view class="item-title">活动时间段</view>
								</view>
								<view class="head-list__right" v-if="activityDetail.limitTimeStatus == 1">全天</view>
								<view class="head-list__right" v-if="activityDetail.limitTimeStatus == 2">
									{{ activityDetail.limitTime }}
								</view>
							</view>
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<image class="item-icon"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/icon_user.png">
									</image>
									<view class="item-title">适用用户</view>
								</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 1">所有会员</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 2">所有个人会员</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 3">指定个人会员</view>
								<view class="head-list__right" v-if="activityDetail.applyUserStatus == 4">所有车队会员</view>
							</view>
							
							<view class="head-list__item flex-row-start">
								<view class="head-list__left flex-row-start">
									<image class="item-icon"
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/icon_site.png">
									</image>
									<view class="item-title">适用站点</view>
								</view>
								<view class="head-list__right" v-if="activityDetail.applyStationStatus == 1">所有站点</view>
								<view class="head-list__right zdTip" style="width: 70%" v-if="activityDetail.applyStationStatus == 2 || activityDetail.applyStationStatus == 3">
									<!-- activityDetail.applyStationTitle + -->
								    {{ activityDetail.applyStationDetail }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="award_ladder-wrap">
					<view class="ladder_title">奖励阶梯</view>
					<view class="ladder_tabs flex-row-evenly">
						<view class="item" :class="{on:item.value == ladderTabsOn}" v-for="item in ladderTabs" @click="ladderTabsChange(item.value)">{{item.title}}</view>
					</view>
					<view class="award_ladder">
						<view class="ladder_list">
							<view class="ladder_list_item" v-for="(item) in marketActivityRewardLadderList">
								<view class="ladder_list_item_title">{{item.name}}</view>
								<view class="ladder_list_item_dist">累计充电满{{item.accumulatedCharge}}度</view>

								<view class="integralCouponList">
									<view class="integralCouponItem" v-if="item.rewardIntegral == 0"
										:style="{ backgroundImage: 'url(' + integralBg + ')' }">
										<view>{{item.integralBoundRewardVo.integralAmount || 0}}分</view>
										<view>积分</view>
									</view>
									<view class="integralCouponItem" v-if="item.rewardBounty == 0"
										:style="{ backgroundImage: 'url(' + integralBg + ')' }">
										<view>￥{{item.integralBoundRewardVo.boundAmount || 0}}</view>
										<view>奖励金</view>
									</view>
									<view class="integralCouponItem" v-if="item.rewardEquity == 0"
										:style="{ backgroundImage: 'url(' + integralBg + ')' }">
										<view>{{item.integralBoundRewardVo.equityNum || 0}}个</view>
										<view>权益</view>
									</view>
								</view>


								<view class="cashCouponList" v-if="(item.couponVoList && item.couponVoList.length) || (item.cardVoList && item.cardVoList.length)">
									<view class="cashCouponItem" v-for="coupon in item.couponVoList"
										:style="{ backgroundImage: 'url(' + redBg + ')','margin-bottom':mindex<3?'40rpx':'' }">
										<view>{{coupon.couponName}}</view>
										<view>￥{{coupon.couponAmount}}<text class="cashCouponItem_count" v-if="coupon.num!=1">x{{coupon.num}}</text></view>
										<view>满{{coupon.couponUseSill}}可用</view>
									</view>
									
									<view class="cashCouponItem ka" v-for="card in item.cardVoList"
										:style="{ backgroundImage: 'url(' + redBg + ')','margin-bottom':mindex<3?'40rpx':'' }">
										<view>{{card.cardName}}</view>
										<view>{{card.cardAmount}}</view>
										<view style="font-size: 16rpx;">{{card.cardUseSill}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pay-award__box">
					<view class="box-head flex-row-start">
						<view class="box-head__title">活动说明</view>
					</view>

					<view class="box-describe">
						{{ activityDetail.explainText }}
					</view>
				</view>


			</view>

			<view v-if="activityDetail.status == 1">
				<Upgrading imgType="s1" text="活动开始时间 " :textTime="activityDetail.startTime" text2="敬请期待!"></Upgrading>
			</view>

			<view v-if="activityDetail.status == 3">
				<Upgrading imgType="s3" text="哎呀，活动结束了~"></Upgrading>
			</view>

			<view v-if="activityDetail.status == 4">
				<Upgrading imgType="s3" text="哎呀，活动已停止~"></Upgrading>
			</view>
		</view>

		<view v-if="activityDetail.userStatus == 2">
			<Upgrading imgType="u0" text="抱歉，您不是受邀用户，暂时无法参加此活动哦!"></Upgrading>
		</view>
	</view>
</template>

<script>
	// import zpMixins from '@/uni_modules/zp-mixins/index';

	// import customNav from '../../../../components/custom-nav/index';
	import Upgrading from 'homeSub/components/upgrading/upgrading_yxhk.vue';
import {
	getConsumeActivityDetail
} from '../../../../api/marketing/stationListApi';
	// homeSub/pages/discount/cumulativeMoney/cumulativeMoney.ts
	const app = getApp();
	export default {
		components: {
			// customNav,
			Upgrading
		},
		// http://8.134.96.187/
		data() {
			return {
				taskImg2: app.globalData.imgUrl + '/group1/operateSchemeImage/image/Illustration_2.png',
				integralBg: app.globalData.imgUrl + '/group1/operateSchemeImage/image/integral-bg.png',
				redBg: app.globalData.imgUrl + '/group1/operateSchemeImage/image/Red-bg.png',
				lxbgURL: app.globalData.imgUrl + '/group1/operateSchemeImage/image/lxbg.png',
				ladderTabs:[
					{title:'充电量',value:'tab0'},
					// {title:'充电次数',value:'tab1'},
					// {title:'单笔充电',value:'tab2'},
				],
				marketActivityRewardLadderList:[],
				ladderTabsOn:'tab0',
				HD: '',

				activityDetail: {
					userStatus: 0,
					status: 0,
					name: '',
					startTime: '',
					alwaysValidStatus: 0,
					endTime: '',
					limitTimeStatus: 0,
					limitTime: '',
					applyUserStatus: 0,
					explainText: ''
				},

				jlfsDetail: {
					fwf: {
						giveCount: '',
						consumeAmount: '',
						completeUnitAwardCount: 0,
						limitCountUnit: 0
					},

					jlj: '',
					jf: ''
				},

				yhqDetail: {},
				navHeight: app.globalData.statusBarHeight + app.globalData.navBarHeight,

				value: {
					couponType: 0,
					couponAmount: '',
					completeUnitAwardCount: 0,
					limitCountUnit: 0
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(options);
			this.setData({
				HD: options.HD
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			console.log(this.HD, 'sssssssssssssss');
			this.getHdDetail();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			ladderTabsChange(ladderTabsOn){
				this.ladderTabsOn = ladderTabsOn
			},
			//获取站点累计消费活动详情
			getHdDetail() {
				getConsumeActivityDetail({
					id: this.HD,
					plUserId: uni.getStorageSync('memberId')
				}).then((res) => {
					console.log(res.data, 'lllllllll');
					if (res.code == 200) {
						let activityDetail = res.data.activityDetail
						this.setData({
							activityDetail,
							jlfsDetail: {
								fwf: res.data.serviceFeeDetail,
								jlj: res.data.bonusDetailList,
								jf: res.data.integralDetailList
							},
							yhqDetail: res.data.couponDetailList
						});
						uni.setNavigationBarTitle({
							title: activityDetail.accumulatedType == 1 ? '单笔优惠详情' : '累计充电详情'
						})
						if(activityDetail.accumulatedType == 2){
							let marketActivityRewardLadderList = res.data.marketActivityRewardLadderList.map(item=>item.activityRewardLadderVo)
							// activityRewardLadderVoList = activityRewardLadderVoList.filter(item=>item.chargingCapacityType == 0)
							this.marketActivityRewardLadderList = marketActivityRewardLadderList
						}
						console.log(this.activityDetail, 'aaaaaaaaaa');
						console.log(this.jlfsDetail, 'jjjjjj');
						console.log(this.yhqDetail, 'yyyyyyyyyy');
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	@import '../../../../commin/flex.less';

	.bg {
		background-color: #f5f7fa;
		min-height:100vh;
	}

	.nav__bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 60px;
		z-index: -1;
		overflow: hidden;

		.img {
			width: 100%;
			height: 335rpx;
		}
	}

	.pay-award {
		.head-list {
			margin-top: 20rpx;

			&__left {
				width: 200rpx;
			}

			&__right {
				font-size: 28rpx;
				color: #303133;
			}

			&__item {
				margin-bottom: 38rpx;
				align-items: flex-start !important;

				.item-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 13rpx;
				}

				.item-title {
					font-size: 28rpx;
					color: #606266;
					width: 200rpx;
				}
			}
		}

		&__box {
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			border: 2rpx solid #ffffff;
			box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
			border-radius: 16rpx;
			margin: 0 24rpx;
			padding: 0 32rpx;
			margin-bottom: 16rpx;

			.box-head {
				height: 100rpx;
				border-bottom: 1px solid #dcdfe6;

				&__title {
					font-size: 30rpx;
					font-weight: bold;
					color: #303133;
					margin-right: 33rpx;
				}

				&__desc {
					font-size: 26rpx;
					color: #909399;
				}
			}

			.card_wrap {
				padding-top: 32rpx;

				.card_item {
					position: relative;
					width: 202rpx;
					height: 192rpx;
					z-index: 1;
					margin-right: 15rpx;
					margin-bottom: 24rpx;
					line-height: 1;
					padding-top: 30rpx;
					box-sizing: border-box;

					/* &:nth-child(3),&:nth-child(6),&:nth-child(9) {*/
					/*     margin-right: 0;*/
					/* }*/
					&:nth-child(3n) {
						margin-right: 0;
					}

					.desc {
						font-size: 22rpx;
						color: #a27344;
						margin-bottom: 16rpx;
					}

					.bg {
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: -1;
					}

					.title {
						font-size: 30rpx;
						font-weight: bold;
						color: #fc724c;
						margin-bottom: 20rpx;
					}

					.btn {
						position: relative;
						width: 182rpx;
						height: 65rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #a14b20;

						.btn_frame {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							z-index: -1;
						}
					}
				}
			}

			.link-img {
				width: 695rpx;
				height: 25rpx;
				margin: 32rpx -32rpx;
			}

			.box-discounts {
				.hig {
					font-weight: bold;
					color: #ae865c;
				}

				&__head {
					position: relative;
					height: 101rpx;
					z-index: 1;
					padding: 0 32rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #606266;

					.head-bg {
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: -1;
						left: 0;
						top: 0;
					}
				}

				&__tickets {
					/* height: 242rpx;*/
					width: 630rpx;
					margin: 0 auto;
					background: #fdf1e5;
					/* opacity: 0.6;*/
					border-radius: 10rpx;
					border-top-left-radius: 0;
					border-top-right-radius: 0;
					margin-top: -24rpx;
					padding: 60rpx 46rpx 20rpx;
					box-sizing: border-box;

					.tickets-item {
						width: 137rpx;
						height: 142rpx;
						position: relative;
						z-index: 1;
						line-height: 1;
						margin-right: 60rpx;
						margin-bottom: 33rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&__bg {
							position: absolute;
							width: 100%;
							height: 100%;
							z-index: -1;
						}

						&__title {
							font-size: 18rpx;
							color: #a26d35;
							padding-top: 8rpx;
							margin-bottom: 20rpx;
						}

						&__num {
							text {
								font-size: 22rpx;
							}

							font-weight: bold;
							color: #f0703e;
							font-size: 36rpx;
							margin-bottom: 25rpx;
						}

						&__desc {
							font-size: 22rpx;
							color: #fad9b1;
						}
					}
				}
			}

			.box-describe {
				padding: 39rpx 0;
				font-size: 26rpx;
				color: #303133;
				word-wrap: break-word;
			}
		}
	}

	.demarcation {
		margin: 0 auto;
		height: 70rpx;
		margin-top: 20rpx;

		.img {
			width: 99%;
			height: 100%;
			margin-left: 8rpx;
		}
	}

	.hd_box {
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
		margin: 0 24rpx 20rpx;
		border-radius: 0 0 16rpx 16rpx;
		background-color: #ffffff;

		.activity-container {
			// background: #fcfbfc;
			border: 2rpx solid #fcfbfc;
			border-radius: 0 0 16rpx 16rpx;
			padding: 0 32rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #303133;
				margin: 0 auto;
			}

			.line-container {
				display: flex;

				.dotted-line {
					width: 100%;
					border-bottom: 0.5rpx solid #dcdfe6;
					margin: 20rpx auto;
				}

				.left-circle {
					width: 18rpx;
					height: 36rpx;
					border-radius: 0 18rpx 18rpx 0;
					line-height: 36rpx;
					background-color: #f5f7fa;
					position: absolute;
					left: 25rpx;
				}

				.right-circle {
					width: 18rpx;
					height: 36rpx;
					border-radius: 18rpx 0 0 18rpx;
					line-height: 36rpx;
					background-color: #f5f7fa;
					position: absolute;
					right: 25rpx;
				}
			}
		}
	}



	/* 奖励方式遮罩*/
	.zhezhao {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(23, 20, 16, 0.7);
		border-radius: 16rpx;

		.zhezhao_container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #f5f7fa;
		}
	}

	// 奖励阶梯样式
	.award_ladder-wrap{
		margin: 40rpx 24rpx 20rpx;
		.ladder_title {
			font-size: 34rpx;
			font-weight: bold;
			color: #303133;
			margin-left: 33rpx;
			margin-bottom: 32rpx;
		}
		.ladder_tabs{
			margin-bottom: 24rpx;
			.item{
				font-size: 28rpx;
				color: #909399;
				&.on{
					color: #1487FA;
				}
			}
		}
	}
	.award_ladder {
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
		border-radius: 0 0 16rpx 16rpx;
		background-color: #ffffff;
		margin-bottom: 16rpx;
		padding: 0 32rpx;
		.ladder_list{
			// padding:32rpx 0;
		}
		.ladder_list_item{
			border-bottom:1rpx #DCDFE6 dashed;
			padding:32rpx 0;
		}
		.ladder_list_item_title{
			color: #303133;
			font-weight: bold;
			font-size: 30rpx;
			margin-bottom: 24rpx;
			
		}
		.ladder_list_item_dist{
			color: #606266;
			font-size: 26rpx;
			margin-bottom: 32rpx;
		}
		.integralCouponList {
			width: 100%;
			//   padding: 0 40rpx;
			//   box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: row;
		}

		.integralCouponItem {
			width: 200rpx;
			height: 190rpx;
			color: #fc724c;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-right: 17rpx;
			margin-bottom: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			>view:nth-of-type(2) {
				color: #a14b20;
				margin-top: 40rpx;
				font-size: 22rpx;
			}
		}

		.cashCouponList {
			// width: 90%;
			//   height: 400rpx;
			margin: 24rpx auto 0 auto;
			background: #fdf1e5;
			border-radius: 10rpx;
			padding: 30rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
		}

		.cashCouponItem {
			width: 137rpx;
			height: 142rpx;
			margin: 0 35rpx 20rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			.cashCouponItem_count{
				
			}
			>view:nth-of-type(1) {
				color: #a26d35;
				font-size: 20rpx;
			}

			>view:nth-of-type(2) {
				color: #f0703e;
				font-size: 22rpx;
				font-weight: 600;
			}

			>view:nth-of-type(3) {
				color: #fad9b1;
				font-size: 22rpx;
			}
			
			&.ka{
				>view:nth-of-type(2) {
					padding-bottom: 30rpx;
				}
			}
		}

	}
</style>